<template>
	<view class="myProject" v-if="myProjectList.length != 0">
		
		<!-- 列表 -->
		<view class="list" v-for="(item,index) in myProjectList" :key="index" >
			<view class="list_t flex-r-s-c">
				<image src="../../static/mine/wdxm_icon.png" mode="widthFix"></image>
				<view class="text">{{item.store}}</view>
			</view>
			
			
			<view class="list_b flex-r-a-c">
				<image :src="item.image" mode=""></image>
				<view class="list_b_f">
					<view class="name">{{item.sname}}</view>
					<view class="list_b_f_c_box flex-r-b-c">
						<view class="introduce">{{item.intro}}</view>
						<view class="quantity">X {{item.num}}</view>
					</view>
					<view class="list_btn" @tap.stop="goTabOrder(item.sid)">立即预约</view>
				</view>
			</view>
			
			
		</view>
		
		

		
	</view>
	
	<view class="serviceReservation" :style="{minHeight:hei+'px'}" v-else>
		<image style="width: 100%; margin-top: 30%;" src="../../static/icon/icon-xm@2x.png" mode="widthFix"></image>
		<view style="width: 100%; text-align: center; font-size: 44rpx; font-weight: 400; color: #333333; margin-top: 30rpx;">暂 无 项 目</view>
		<view style="width: 100%; text-align: center; font-size: 32rpx; font-weight: 400; color: #333333; margin-top: 40rpx;">请于商城中心去购买服务项目再进行预约！</view>
		<view style="width: 80%; height: 88rpx; line-height: 88rpx; text-align: center; border-radius: 88rpx; background-color: #45806E; color: #FFFFFF; font-size: 32rpx; font-weight: 500; position: fixed; left: 50%; bottom: 90rpx; transform: translateX(-50%);" @click="goIndex">确定</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				myProjectList: [],
				hei: this.$hei
			};
		},
		onLoad() {
			this.getMyProjectList()  // 获取我的项目列表
		},
		methods:{
			// 获取我的项目列表
			getMyProjectList(){
				let that = this
				that.$api.myProject_list().then(res => {
					console.log(res)
					that.myProjectList = res.data.data
				})
			},
			// 跳转到服务预约
			goTabOrder(sid){
				// this.$emits('tabOrder', {
				// 	fwId: sid,
				// 	jsId: null
				// })
				
				// uni.switchTab({
				// 	url: '/pages/tabBar/order/order'
				// })
				uni.navigateTo({
					url: '/pages/tabBar/serviceReservation/serviceReservation'
				})
			},
			goIndex(){
				uni.navigateTo({
					url: '/pages/tabBar/newService/newService'
				})
			}
		}
	}
</script>

<style lang="less">
	.myProject{
		.list{
			width: 90vw;
			height: 340rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			margin: 40rpx auto;
			.list_t{
				width: 100%;
				height: 76rpx;
				padding: 0 30rpx;
				background-color: #45806E;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				image{
					width: 38rpx;
					height: 38rpx;
				}
				.text{
					margin-left: 20rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
			// 
			.list_b{
				margin-top: 30rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
				.list_b_f{
					width: 70%;
					position: relative;
					.name{
						font-size: 32rpx;
						font-weight: bold;
						color: #3B3B3B;
					}
					.list_b_f_c_box{
						margin-top: 20rpx;
						.introduce{
							font-size: 28rpx;
							font-weight: 500;
							color: #717171;
						}
						.quantity{
							box-sizing: border-box;
							color: #FF6C1D;
							font-weight: 500;
							font-size: 36rpx;
							padding-right: 40rpx;
						}
					}
					.list_btn{
						position: absolute;
						bottom: -80rpx;
						right: 35rpx;
						width: 180rpx;
						height: 62rpx;
						line-height: 62rpx;
						text-align: center;
						border: 1px solid #45806E;
						border-radius: 20rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #0F4C3A;
					}
				}
			}
			
		}
	}
</style>
